import { Breadcrumb, Table, message } from 'antd';
import React, { FC } from 'react';
import { Utils } from 'lfun-bg-comp';
import _ from 'lodash';
import { PageContainer } from '@/component/page-container';
import { PAGINATIONCONFIG } from '@/constant/page';
import { allCourse, selectedCourse, updateCourse, UpdateCourse } from '@/service/unit/course';
import { get_stoge_pz, set_stoge_pz } from '@/utils';
import { isPermission } from '@/component/permission-button';

const Groups: FC = () => {
  const [value, setValue] = React.useState([]);
  const [total, setTotal] = React.useState(0);
  const [pageSize, setPageSize] = React.useState(get_stoge_pz(50));
  const [pageIndex, setPageIndex] = React.useState(1);
  const [selectedList, setSelectedList] = React.useState<any[]>([]);
  const [loading, setLoading] = React.useState(false);

  const init = async () => {
    setLoading(true);
    const course = await allCourse();
    if (course.success) {
      setTotal(course.data.length);
      const selected = await selectedCourse(Utils.getProps('schoolInfo')?.school_id, 1, course.data.length);
      if (selected.success) {
        setSelectedList(selected?.data?.items || []);
        setValue(
          course.data.map(v => ({
            id: v.id,
            name: v.course_name,
            code: v.course_no,
            selected: _.findIndex(selected.data.items, { course_no: v.course_no }) !== -1,
          }))
        );
      }
    }
    setLoading(false);
  };

  React.useEffect(() => {
    init();
  }, []);

  const pageChange = (pageIndex, pageSize) => {
    set_stoge_pz(pageSize);
    setPageIndex(pageIndex);
    setPageSize(pageSize);
  };
  const columns = [
    {
      title: '学科名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
    },
    {
      title: '代码',
      dataIndex: 'code',
      key: 'code',
      width: 100,
    },
    {
      title: '选择',
      dataIndex: 'selected',
      key: 'selected',
      width: 100,
      hidden: !isPermission({ permission: 'change' }),
      render: (text: any, record: any) => {
        return (
          <input
            type="checkbox"
            checked={text}
            onChange={async () => {
              const up_selectedList = [...selectedList];
              if (!text) {
                const params: UpdateCourse = {
                  course_id: record.id,
                  course_name: record.name,
                  course_no: record.code,
                  school_id: Utils.getProps('schoolInfo')?.school_id,
                };
                up_selectedList?.push(params);
              } else {
                _.remove(up_selectedList, item => item.course_no === record.code);
              }
              ///const course = _.find(value, { course_no: record.code });
              const res = await updateCourse(Utils.getProps('schoolInfo')?.school_id, up_selectedList);
              if (res.success) {
                setSelectedList(up_selectedList);
                const val = value.map(v => ({
                  id: v.id,
                  name: v.name,
                  code: v.code,
                  selected: _.findIndex(up_selectedList, { course_no: v.code }) !== -1,
                }));
                setValue(val);
              } else {
                message.error('修改失败');
              }
            }}
          />
        );
      },
    },
  ];

  return (
    <PageContainer header={<Breadcrumb items={[{ title: '中小学学科管理' }]} />}>
      <Table
        loading={loading}
        dataSource={value}
        columns={Utils.getProps('isSchool') ? columns : columns.splice(0, 2)}
        scroll={{ x: 'max-content' }}
        pagination={{ ...PAGINATIONCONFIG, total, pageSize, current: pageIndex, onChange: pageChange }}
      />
    </PageContainer>
  );
};

export default Groups;
